<script setup>
</script>

<template>
  <div>
    <nav>
      <router-link :to="{name:'home'}">home</router-link>
      <router-link :to="{name:'about'}">about</router-link>
      <router-link :to="{name:'login'}">login</router-link>
      <router-link :to="{name:'article'}">article</router-link>
      <router-link :to="{name:'user'}">user</router-link>
    </nav>
    <main>
      <suspense>
        <template #default>
          <router-view />
        </template>
      </suspense>
    </main>
  </div>
</template>

<style lang="scss" scoped>
  a{
    display: inline-block;
    background-color:#1abc9c;
    color: #fff;
    padding:20px;
  }

  main{
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
  }
</style>
